<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#main{
				height: 250px;
			}
			.row{
				
				position: relative;
			}
			.row li{
				float: left;
				padding: 5px;
				border: 1px solid #cccccc;
				box-shadow: 0 0 5px #ccc;
				border-radius: 5px;
				
			}
			.row li img{
				width: 250px;
			}
		</style>
	</head>
	<body>
		<div id="main">

			<ul class="row" id="box">
				<li>
					<img src="img/1.png" >
				</li>
				<li>
					<img src="img/2.png" >
				</li>
				<li>
					<img src="img/3.png" >
				</li>
				<li>
					<img src="img/4.png" >
				</li>
				<li>
					<img src="img/5.png" >
				</li>
				<li>
					<img src="img/6.png" >
				</li>
				<li>
					<img src="img/7.png" >
				</li>
				<li>
					<img src="img/8.png" >
				</li>
				<li>
					<img src="img/9.png" >
				</li>
				<li>
					<img src="img/10.png" >
				</li>
				<li>
					<img src="img/11.png" >
				</li>
				<li>
					<img src="img/12.png" >
				</li>
				<li>
					<img src="img/13.png" >
				</li>
				<li>
					<img src="img/14.png" >
				</li>
			</ul>

		</div>
		<script type="text/javascript">
			$(document).ready(function(){
				deal();
				var imgs=["img/14.png","img/15.png","img/16.png","img/17.png","img/18.png","img/19.png"];
				var box=document.getElementById('box');
				$(document).scroll(function(){
					var pageHeight=document.documentElement.clientHeight;
					
					var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
					
					var length=$(".row li").length;
					console.log(length)
					var lastTopHeight=$(".row li").eq(length-1).offset().top;
					// console.log(pageHeight,scrollTop,lastTopHeight)
					if((pageHeight+scrollTop)>lastTopHeight){
						//
						console.log("加载页面")
						for(var i=0;i<imgs.length;i++){
							var li=document.createElement('li');
							box.appendChild(li);
							var img=document.createElement('img');
							img.src=imgs[i];
							li.appendChild(img);
						}
						deal()
					
						
					}
				})
				
				function deal(){
					var screenWidth=document.documentElement.clientWidth;//当前屏幕可视的宽度
					var imgWidth=$(".row li")[0].offsetWidth;
					var numb=Math.floor(screenWidth/imgWidth);
					console.log("numb",numb)
					var rowWidth=imgWidth*numb;
					$(".row").css({width:rowWidth+"px",margin:"0 auto"});
					var rowheightArr=[];
					$(".row li").each(function(index,value){
						var rowheight=value.offsetHeight;
						if(index<numb){
							rowheightArr.push(rowheight)
						}else{
							var minHeight=Math.min.apply(null,rowheightArr);
							
							var min_index=minIndex(rowheightArr,minHeight);//最小高度的index
							value.style.position="absolute";
							value.style.left=$(".row li")[min_index].offsetLeft+"px";//
							value.style.top=minHeight+"px";
							rowheightArr[min_index]=minHeight+(value.offsetHeight);
						}
					})
				}
			
				function minIndex(rowheightArr,minHeight){
					for(var i=0;i<rowheightArr.length;i++){
						if(rowheightArr[i]==minHeight){
							return i
						}
					}
				}
				
				
				
			})
		</script>
	</body>
</html>
